<%@page import="main.java.datatypes.HistorialVO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@page import="main.java.entities.Historial"%>
<%@page import="main.java.datatypes.HistorialVO"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="java.sql.Timestamp"%>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Temperature Analyzer</title>
	<link href="/TemperatureAnalyzerWeb/style.css" rel="Stylesheet" type="text/css"/>
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    

      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
    
      <%
  		HistorialVO hVo = (HistorialVO)request.getAttribute("historialvo");
  		%>
  				
      	
      
      function drawChart() {
    	  <%
    	  int cant = 0;
   		if ((hVo != null) && (hVo.getHistorialList()!= null)){
   			cant = (hVo.getHistorialList()).size();
   	  	}
    	  %>  
		var cantidad = <%=cant%>;
		var temp = new Array(cantidad);
		var date = new Array(cantidad);
      <%          	
 	
      //for(Historial h : hVo.getHistorialList()){
    	for(int i= 0; i < cant ; i++){
    		Historial h = hVo.getHistorialList().get(i);	
    	%>	
    		temp[<%=i%>] = <%=h.getValue()%> ;
    		date[<%=i%>] = '<%=h.getTimestamp().toString()%>';
    	<%		
     	}
      	%>
      	var data = new google.visualization.DataTable();
      	data.addColumn("string", "Tiempo");
      	data.addColumn("number", "Temperatura");
        data.addRows(cantidad);  
        
        for(var i = 0; i < cantidad ; i++){
         data.setCell(i, 1,temp[i]);
         data.setCell(i, 0, date[i]);
        }
        
        var options = {
          title: 'Historial de tempreturas del sensor',
          curveType: "function",
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
</head>
<body>
	<jsp:include page="/WEB-INF/header.jsp"/>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>